<template>
  <div class="AddEquipment">
    <div class="cus-title">
      <h4>新增RFID设备</h4>
    </div>
    <div class="cus-update">
      <el-form ref="form" :model="BindForm" :rules="rules" label-width="120px" label-position="left">
        <el-form-item label="商品:" prop="goods">
          <el-col :span="24">
            <select-goods v-model="BindForm.goods" :only-online="true" :sku="true" :store-id="storeId" @change="changeGoods" />
          </el-col>
        </el-form-item>
        <el-form-item label="门店:" prop="storeId">
          <el-col :span="24">
            <store-select ref="storeSelect" v-model="BindForm.storeId" field="storeId" :store-id="storeId" :link-goods="true" :only-goods="true" :goods-id="BindForm.goods ? BindForm.goods.goodsId : null" :disabled="disabled" />
          </el-col>
        </el-form-item>
        <el-form-item label="设备编号:" prop="equipmentCode">
          <el-col :span="24">
            <el-input
              v-model="BindForm.equipmentCode"
              type="textarea"
              :autosize="{ minRows: 7 }"
              resize="none"
              placeholder="添加多个请用英文“逗号”隔开"
              style="width: 400px;"
            />
          </el-col>
        </el-form-item>
        <!--        <el-form-item label="收费模板:" prop="chargeTemplateId">-->
        <!--          <el-col :span="24">-->
        <!--            <SelectCollectMoneyTemplate v-model="BindForm.chargeTemplateId" />-->
        <!--          </el-col>-->
        <!--        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" @click="submit">确认新增</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import SelectGoods from '../../../../components/SelectGoods/index'
import StoreSelect from '../../../../components/StoreSelect/index'
import { Loading } from 'element-ui'
import { addRFID } from '@/api/lockItem'
// import SelectCollectMoneyTemplate from '../../../../components/SelectCollectMoneyTemplate/index'
/** 新增RFID设备 */
export default {
  name: 'AddEquipment',
  components: { StoreSelect, SelectGoods },
  data() {
    var validateEquCode = (rule, value, callback) => {
      var Regx = /^[0-9,]*$/
      if (value && value.length > 0 && !Regx.test(value)) {
        callback(new Error('请输入正确的设备编号'))
      } else {
        callback()
      }
    }
    return {
      storeId: null,
      disabled: false,
      BindForm: {
        goods: null,
        commodityId: null,
        storeId: null,
        equipmentCode: null
      },
      rules: {
        goods: [{ required: true, message: '请选择商品', trigger: 'change' }],
        storeId: [{ required: true, message: '请选择门店', trigger: 'change' }],
        equipmentCode: [{ required: true, message: '请输入设备编号', trigger: 'change' }, { validator: validateEquCode, trigger: 'change' }]
        // chargeTemplateId: [{ required: true, message: '请选择收费规则', trigger: 'blur' }]
      }
    }
  },
  created() {
    const params = this.$dd(this.$route.query.p)
    if (params && params.storeId) {
      this.storeId = params.storeId
      this.disabled = true
    }
  },
  methods: {
    resetForm() {
      const vm = this
      vm.$refs.form.resetFields()
    },
    changeGoods() {
      this.$nextTick(() => {
        this.$refs.storeSelect.refresh()
      })
    },
    submit() {
      const vm = this
      vm.$refs.form.validate((valid) => {
        if (valid) {
          const loadingInstance = Loading.service({ fullscreen: true })
          const data = vm.$XEUtils.clone(vm.BindForm, true)
          data['commodityId'] = data.goods.goodsId
          data['storeId'] = parseInt(data['storeId'])

          if (data.goods.selectedSku) {
            data['skuInfo'] = data.goods.selectedSku
          }
          if (data.goods.goodsSkuNames) {
            data['skuName'] = data.goods.goodsSkuNames
          }
          delete data.goods
          addRFID(data).then(res => {
            loadingInstance.close()
            vm.$message.success('新增RFID设备成功')
            vm.$store.dispatch('tagsView/delView', vm.$route)
            vm.$router.go(-1)
          }).catch(res => {
            loadingInstance.close()
            if (res && res.data && res.data.errno !== 0) {
              this.$message.error(`${res.data.errmsg}（${res.data.errno}）`)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .AddEquipment {
    padding: 30px;
    .cus-update {
      padding: 20px 30px;
      padding-bottom: 0px;
      margin-bottom: 30px;
      border: 1px solid #eee;

      .cus-input {
        max-width: 400px;
      }
    }
  }
</style>
